import styles from './index.less';
import { Button } from 'antd';
import { useModel } from 'umi';
import useController from './../../utils/VM/useController';
import Ctrl from './index.ctrl';
import { useEffect, useLayoutEffect } from 'react';
import { useState } from 'react';

export default function IndexPage() {
  const { initialState, loading, error, refresh, setInitialState } =
    useModel('@@initialState');
  console.log(
    '🚀 ~ file: index.tsx ~ line 8 ~ IndexPage ~ initialState',
    initialState,
  );

  const vm = useController<Ctrl>(Ctrl);
  console.log(vm.data.value);

  const arr = [1, 1, 3, 5];

  const fb = (n) => {
    if (n === 0) {
      return 0;
    }
    if (n === 1 || n === 1) {
      return 1;
    }
    return fb(n - 1) + fb(n - 2);
  };
  // console.log(fb(20));

  const a = document.createElement('style');
  a.innerHTML = `:root {
    --ant-primary-color: #5656aa;
  }`;

  document.documentElement.append(a);
  console.log(a);

  const [state, setState] = useState('hello world');

  // useEffect(() => {
  //   let i = 0;
  //   while(i <= 100000000) {
  //     i++;
  //   };
  //   setState("world hello");
  // }, []);

  navigator.geolocation.getCurrentPosition((p) => {
    console.log(p);
  });

  useLayoutEffect(() => {
    let i = 0;
    while (i <= 100000000) {
      i++;
    }
    setState('world hello');
  }, []);

  return (
    <div
      style={{
        transform: `translateX(${vm.data.value}px)`,
        transition: '2s',
        background: 'lightGreen',
      }}
    >
      <a className={styles.title}>{vm.data.value}</a>
      <Button
        onClick={() => {
          //  vm.add()
          console.log(vm);

          vm.data.value += 100;
        }}
      >
        +
      </Button>
      <h1>1111</h1>
      <h1>1111</h1>
      <h1>{state}</h1>
    </div>
  );
}
